<!-- 某日的某个人的工时详情组件 -->
<script setup lang="ts">
import { ref, watch, computed } from "vue"
import { dayDetailApi, dayDetailByUserIdAndDateApi } from "@/api/report"
import { type DayReportData } from "@/api/report/types/report"

// 使用 defineProps 和 withDefaults 设置默认值
const props = withDefaults(
  defineProps<{
    reportId?: number
    userId?: number
    day?: string
  }>(),
  {
    reportId: 0,
    userId: 0,
    day: ""
  }
)
// 定义触发父组件的事件
const emit = defineEmits<{
  // 操作完成的事件, 主要是为了清除参数
  (event: "detail-complete"): void
}>()

//#region 某日工时详情
const localVisible = ref<boolean>(false)
const dayDetail = ref<DayReportData>()
const openDayDetail = (id: number) => {
  if (id <= 0) return
  dayDetailApi(id).then(({ data }) => {
    dayDetail.value = data
    localVisible.value = true
  })
}
// dayDetailByUserIdAndDateApi
const openDayDetailByUserIdAndDate = (userId: number, day: string) => {
  if (userId <= 0 || !day) return
  dayDetailByUserIdAndDateApi(userId, day).then(({ data }) => {
    dayDetail.value = data
    localVisible.value = true
  })
}

const closeDayDetail = () => {
  localVisible.value = false
  emit("detail-complete")
}

watch(
  () => props.reportId,
  (newId) => {
    // 当 id 发生变化时触发
    openDayDetail(newId) // 调用函数来获取新的数据
  }
)

const reactiveProps = computed(() => ({
  userId: props.userId,
  day: props.day
}))

watch(reactiveProps, (newValue) => {
  openDayDetailByUserIdAndDate(newValue.userId, newValue.day)
})
</script>

<template>
  <!-- 某日工时 弹出框 start -->
  <el-dialog
    v-model="localVisible"
    :title="`【${dayDetail?.user?.userName}】【${dayDetail?.day}】 日工时详情`"
    @closed="closeDayDetail"
    width="60%"
  >
    <div
      style="
        padding-left: 20px;
        background-color: rgb(179, 224.5, 156.5);
        font-size: 1em;
        height: 28px;
        line-height: 28px;
      "
    >
      共<el-text type="danger" size="large"> {{ dayDetail?.reports.length }}</el-text
      >条日报, 累计工时 <el-text type="danger" size="large">{{ dayDetail?.durationHour }}</el-text> 小时
    </div>

    <div class="table-wrapper">
      <el-table :data="dayDetail?.reports" stripe :border="true" ref="dayReportTableRef">
        <el-table-column prop="jira" label="jira" align="center" width="140" />
        <el-table-column prop="projectName" label="项目" align="center" width="120" show-overflow-tooltip />
        <el-table-column prop="durationHour" label="工时(小时)" align="center" width="100" />
        <el-table-column prop="content" label="内容" align="center" />
      </el-table>
    </div>
    <template #footer>
      <el-button @click="localVisible = false">关闭</el-button>
    </template>
  </el-dialog>
  <!-- 某日工时 弹出框 end -->
</template>
